<template>
	<view>
		<view v-if="!isLoading && isError == false">
			<view class="container">
				<view class="header" :style="{paddingTop:statusH+'px'}">
					<view class="header_left">
						<view class="h_l_l">
							<text @click="$utils.navigateTo('index/Nationalstores')">全国店铺</text>
							<image src="/static/search_icon.png" mode=""></image>
						</view>
						<view class="h_l_r" @click="$utils.navigateTo('search/index')">
							<image src="/static/search.png" mode=""></image>
							<input type="text" placeholder="搜索需要的商品" placeholder-class="input_class"/>
						</view>
					</view>
					<image class="header_right" src="/static/sort_gwc.png" mode=""></image>
				</view>
				<view class="box">
					<scroll class="aa" :style="'overflow: hidden;height: '+wHeight+'px;'" scroll-with-animation="true" scroll-y="true" :scroll-top="menuTop" :scroll-into-view="menuIndex">
						<view class="box_left">
							<view class="box_l_item" @click="left_click(item.id,index)" :class="leftIndex == index ? 'item_act' : ''" v-for="(item,index) in category.cate_list" :id="'menu-'+index" :key="index">
								<image v-if="leftIndex == index" src="/static/index_title_icon.png" mode=""></image>
								<text>{{item.title}}</text>
							</view>
						</view>
					</scroll>
					<view class="box_right">
						<view class="right_header1">
							<view class="header1_item" @click="right_click1(cid,item.id,bid,index)" :class="rightNav1Index == index ? 'h1_act' : ''" v-for="(item,index) in category.cate_list2" :key="index">
								{{item.title}}
							</view>
						</view>
						<view class="right_header2">
							<view class="header2_item" @click="right_click2(cid,cid2,item.id,index)"  :class="rightNav2Index == index ? 'h2_act' : ''" v-for="(item,index) in category.brand_list" :key="index">
								{{item.name}}
							</view>
						</view>
						<view class="right_header3">
							<view class="header3_item" @click="right_click3(index)" :class="rightNav3Index == index ? 'h3_act' : ''" v-for="(item,index) in rightNav3" :key="index">
								{{item}}
							</view>
							<view class="header3_item" :class="rightNav4Index != 0 ? 'h2_act' : ''">
								<text>价格</text>
								<image @click="right_click4()" :src="rightNav4Index == 1 ? '/static/up.png' : '/static/down.png'" mode=""></image>
							</view>
						</view>
						<view class="good_box">
							<scroll :scroll-into-view="tabindex" scroll-with-animation="true" scroll-y="true" :style="'height: '+wHeight+'px;'" @scroll="onScroll">
								<view v-if="category.good_list.length" class="g_box_item" v-for="(item,index) in category.good_list" @click="$utils.navigateTo('goods/view',{ id: item.id })">
									<image class="g_l_t" :src="sort_g_icon" mode=""></image>
									<image class="item_l" :src="item.photo" mode=""></image>
									<view class="item_r">
										<view class="r_title">{{item.title}}</view>
										<view class="r_money">
											<text>{{item.price}}元/天</text>
											<image @click="goTo('sort/lease')" src="/static/sort_good.png" mode=""></image>
										</view>
										<view class="r_vip">铂金会员85折</view>
										<view class="r_foot">
											<view class="foot_l">
												<text>上海徐汇店</text>
												<image src="/static/sort_jt.png" mode=""></image>
											</view>
											<text>已租{{item.sale}}</text>
										</view>
									</view>
								</view>
							</scroll>
						</view>
					</view>
				</view>
			</view>
		</view>
		<TabBar :tabBarShow="2"></TabBar>
		<loading v-if="isLoading"></loading>
		<empty-box type="service" v-if="isError && isLoading == false" @onEvents="onJump"></empty-box>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar/TabBar.vue';
	import loading from '../../components/tool/loading';
	import config from "@/config";
	export default {
		components: {
			TabBar,loading
		},
		data() {
			return {
				isLoading:true,
				isError: false,
				wHeight:0,
				menuIndex:0,
				menuTop: 0,
				scrollTop: 0,
				menuHeight: [],
				goodsHeight: [],
				category: [],
				tabindex: 0,
				leftIndex: 0,
				rightNav1: [ '精选','联想','苹果','华为','小米','小米','尼康','相机1','相机2','相机3' ],
				rightNav1Index: -1,
				rightNav2: [ '直播专用','iPad','13寸','13寸','33寸','93寸','93寸' ],
				rightNav3: [ '新品', '热租'],
				rightNav3Index: -1,
				cid: 0,
				cid2: 0,
				bid: 0,
				price: 0, //排序
				is_hot: 0, // 热租
				is_new: 0, // 新品
				rightNav2Index: '-1',
				sort_g_icon:config.uni_app_web_url + 'static/h5/sort_g_icon.png',
				rightNav4Index:0,
				statusH:this.$storage.get("statusH")
				
			}
		},
		onLoad(options) {
			this.cid = options.id;
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.wHeight = systemInfo.windowHeight - uni.upx2px(90);
			this.onLoadData(this.cid);
		},
		methods: {
			onLoadData(cid,cid2,bid,is_hot,is_new,price){
				this.$http.getCategoryList({
					cid: cid,
					cid2: cid2,
					bid: bid,
					//is_hot: this.rightNav3Index,
					//is_new: this.is_new,
					//price: this.price
					is_hot: is_hot,
					is_new: is_new,
					price: price
				}).then((result)=>{
					if(result.status){
						//console.log(111);
						this.isLoading = false;
						this.category = result.data;
						//this.cid = result.data.cate_list[0].id;
						/*this.cid = (result.data.cate_listlength==0)?0:result.data.cate_list[0].id;
						//this.cid2 = result.data.cate_list2[0].id;
						this.cid2 = (result.data.cate_list2.length==0)?0:result.data.cate_list2[0].id;
						//this.bid = result.data.brand_list[0].id;
						this.bid = (result.data.brand_list.length==0)?0:result.data.brand_list[0].id;*/
						this.leftIndex = result.data.left_index
						//console.log(222);
						this.$nextTick(()=>{
							setTimeout(()=>{
								this.setScrollHeight();
							},1500);
						});
						this.isLoading = false;
						this.isError = false;
					}else{
						this.isLoading = false;
						this.isError = true;
					}
				}).catch(err=>{
					this.isLoading = false;
					this.isError = true;
				});
			},
			onJump(){
				this.onLoadData();
			},
			left_click(cid,i){
				this.leftIndex = i;
				this.tabindex = 'item-'+i;
				this.cid = cid;
				this.is_hot = 0;
				this.is_new = 0;
				this.cid2 = 0;
				this.rightNav1Index = -1;
				this.bid = 0;
				this.rightNav2Index = -1;
				this.rightNav3Index= -1;
				this.price = 0;
				this.rightNav4Index= 0;
				this.onLoadData(this.cid,this.cid2,this.bid,this.is_hot,this.is_new);
			},
			right_click1(cid,cid2,bid,i){
				this.rightNav1Index = i;
				//console.log(cid);
				//console.log(cid2);
				//console.log(bid);
				this.cid2 = cid2;
				this.is_hot = 0;
				this.is_new = 0;
				this.bid = 0;
				this.rightNav2Index = -1;
				this.rightNav3Index= -1;
				this.price = 0;
				this.rightNav4Index= 0;
				this.onLoadData(cid,cid2,bid,this.is_hot,this.is_new);
			},
			right_click2(cid,cid2,bid,i){
				this.rightNav2Index = i;
				//console.log(cid);
				//console.log(cid2);
				//console.log(bid);
				this.is_hot = 0;
				this.is_new = 0;
				this.rightNav3Index= -1;
				this.price = 0;
				this.rightNav4Index= 0;
				this.onLoadData(cid,cid2,bid,this.is_hot,this.is_new);
			},
			right_click3(i){
				this.rightNav3Index = i;
				if(i == 1){
					this.is_hot = 1
					this.is_new = 0
				}else{
					this.is_hot = 0
					this.is_new = 1
				}
				this.onLoadData(this.cid,this.cid2,this.bid,this.is_hot,this.is_new);
			},
			right_click4(){
				 
				if(this.rightNav4Index  == 1){
					this.rightNav4Index =2;
				}else{
					this.rightNav4Index =1;
				}
				this.onLoadData(this.cid,this.cid2,this.bid,this.is_hot,this.is_new,this.rightNav4Index);
			},
			onScroll(event){
				if (this.goodsHeight.length == 0) {
				  return;
				}
				
				let scrollTop = event.detail.scrollTop;
				let current = this.leftIndex;
				
				if (scrollTop >= this.scrollTop) {
				  if (current + 1 < this.goodsHeight.length && scrollTop >= this.goodsHeight[current]) {
					this.leftIndex = current + 1;
				  }
				} else {
				  if (current - 1 >= 0 && scrollTop < this.goodsHeight[current - 1]) {
					this.leftIndex = current - 1;
				  }
				}
				
				this.menuIndex = 'menu-'+this.leftIndex;
				this.scrollTop = scrollTop;
			},
			setScrollHeight(){
				let h = 0;
				const query = uni.createSelectorQuery();
				query.selectAll('.goods-item').boundingClientRect().exec((res)=>{
				  res[0].forEach((item) => {
					h += item.height;
					this.goodsHeight.push(h);
				  })
				});
				
				this.menuHeight = [];
				let m = 0;
				query.select(".menu-item").boundingClientRect().exec((res) => {
				  res[0].forEach((item) => {
					m += item.height;
					this.menuHeight.push(m);
				  })
				});
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		// min-height: 100vh;
		// padding: 32rpx 32rpx 200rpx 32rpx;
		// padding: 32rpx;
		// width: calc(100% - 64rpx);
		// background: linear-gradient(181deg, #BBE0FC 0%, #78C0F9 27%, #ACDCF4 60%, rgba(209, 240, 241, 0.9846) 77%, rgba(209, 240, 241, 0) 100%);
		
		.header{
			padding: 50rpx 32rpx 22rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient( 134deg, rgba(209,240,241,0.9846) 0%, #78C0F9 59%, #BBE0FC 100%);
			.header_left{
				flex: 1;
				height: 70rpx;
				background: rgba(255,255,255,0.5);
				border-radius: 123rpx 123rpx 123rpx 123rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				.h_l_l{
					width: 30%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(255,255,255,0.5);
					border-radius: 123rpx 0rpx 0rpx 123rpx;
					border: 2rpx solid #FFFFFF;
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						padding-right: 15rpx;
					}
					image{
						width: 26rpx;
						height: 16rpx;
					}
				}
				.h_l_r{
					padding-left: 30rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					image{
						width: 42rpx;
						height: 42rpx;
					}
					input,.input_class{
						text-indent: 30rpx;
						outline: none;
						border: none;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.header_right{
				margin-left: 21rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}
		
		.box{
			padding: 32rpx 32rpx 32rpx 0;
			background: #F7FEFF;
			display: flex;
			height: calc(100vh - 320rpx);
			.aa{
				width: 30%;
			}
			.box_left{
				height: 100%;
				// width: 30%;
				overflow: auto;
				.box_l_item{
					margin-bottom: 30rpx;
					padding: 10rpx 10rpx 10rpx 16rpx;
					image{
						margin-right: 10rpx;
						width: 24rpx;
						height: 24rpx;
					}
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
				.item_act{
					background: linear-gradient( 116deg, #F2EBFF 0%, #D1F0F1 100%);
					border-radius: 0rpx 30rpx 30rpx 0rpx;
					text{
						font-size: 28rpx;
						color: #3B76FF;
					}
				}
			}
			
			.box_right{
				margin-left: 30rpx;
				width: 70%;
				height: 100%;
				overflow-x: auto;
				.right_header1{
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					overflow: auto;
					font-weight: 400;
					.header1_item{
						// width: 50rpx;
						line-height: 45rpx;
						font-size: 20rpx;
						height: 45rpx;
						color: #666666;
						position: relative;
						margin-right: 24rpx;
						white-space: nowrap;
					}
					.h1_act{
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.h1_act::after{
						content: '';
						width: 15rpx;
						height: 4rpx;
						background: #3B76FF;
						border-radius: 44rpx 44rpx 44rpx 44rpx;
						position: absolute;
						left: calc(50% - 7rpx);
						bottom: 0px;
					}
				}
				
				.right_header2{
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					overflow: auto;
					.header2_item{
						padding: 6rpx 8rpx;
						background: #F4F4F4;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						margin-right: 24rpx;
						white-space: nowrap;
					}
					.h2_act{
						color: #3B76FF;
					}
				}
				.right_header3{
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					overflow: auto;
					.header3_item{
						width: 120rpx;
						height: 44rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						margin-right: 24rpx;
						white-space: nowrap;
						background: #FFFFFF;
						border: 1rpx solid #A5FFA9;
						border-radius: 267rpx 267rpx 267rpx 267rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							font-weight: 400;
							font-size: 20rpx;
							color: #666666;
							padding-right: 10rpx;
						}
						image{
							width: 24rpx;
							height: 24rpx;
						}
					}
					.h3_act{
						background: linear-gradient( 180deg, #55B6EA 0%, #84E7E4 100%) !important;
						color: #FFFFFF !important;
					}
				}
				
				.good_box{
					margin-top: 20rpx;
					.g_box_item{
						padding: 15rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-bottom: 24rpx;
						display: flex;
						align-items: center;
						position: relative;
						.g_l_t{
							position: absolute;
							width: 38rpx;
							height: 66rpx;
							left: 10rpx;
							top: 0;
						}
						.item_l{
							width: 150rpx;
							height: 150rpx;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
						}
						.item_r{
							margin-left: 20rpx;
							flex: 1;
							.r_title{
								font-weight: 400;
								font-size: 24rpx;
								color: #3D3D3D;
								text-overflow: ellipsis;
								text-wrap: wrap;
								white-space: normal;
							}
							.r_money{
								margin-top: 10rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								text{
									font-weight: 600;
									font-size: 30rpx;
									color: #D30000;
								}
								image{
									width: 42rpx;
									height: 42rpx;
								}
							}
							.r_vip{
								display: inline-block;
								margin-top: 8rpx;
								padding: 2rpx 17rpx;
								background: linear-gradient( 138deg, #FFDFDF 0%, #FAF3E9 52%, #FFEFC0 100%);
								border-radius: 244rpx 244rpx 244rpx 244rpx;
								font-weight: 400;
								font-size: 14rpx;
								color: #932C00;
							}
							.r_foot{
								margin-top: 10rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								text{
									font-weight: 400;
									font-size: 18rpx;
									color: #999999;
								}
								.foot_l{
									display: flex;
									align-items: center;
									text{
										margin-right: 10rpx;
									}
									image{
										width: 20rpx;
										height: 20rpx;
									}
								}
							}
						}
					}
				}
			}
		}
		
	}
</style>